<template>
  <div>
    <h2>我是测试</h2>
    ----------------
    <br>
    <router-link to="/ceshi/about" tag="button" replace active-class="active">关于</router-link>
    <router-link to="/ceshi/message" tag="button" replace active-class="active">新闻</router-link>
    <br>
    <button @click="storeClick()">vuex</button>
    <button @click="promiseClick()">promise</button>
    <button @click="axiosClick()">axios</button>
    <button @click="userClick()">用户</button>
    <!--路由渲染后展示的位置，占位-->
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

<script>
export default {
  name: "ceshi",
  data () {
    return {
      promiseStr: '/promise',
      axiosDemoStr: '/axiosDemo',
      storeStr: '/storeDemo',
      userId: '123123'
    }
  },
  methods: {
    storeClick () {
      console.log('跳转store')
      this.$router.replace(this.storeStr)
    },
    promiseClick () {
      console.log('跳转promise')
      this.$router.replace(this.promiseStr)
    },
    axiosClick () {
      console.log('跳转axiosDemo')
      this.$router.replace(this.axiosDemoStr)
    },
    userClick () {
      console.log('跳转用户')
      this.$router.push('/user/' + this.userId)
    }
  }

}
</script>

<style scoped>

</style>
